<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Slider Kit > Photos sliders</title>
		<meta name="Keywords" content="slider, kit, slideshow, gallery, carousel, jquery plugin" />
		<meta name="Description" content="Slider Kit jQuery slideshow plugin: photos sliders examples" />
		
		<!-- jQuery library -->
		<script type="text/javascript" src="../lib/js/external/_oldies/jquery-1.3.min.js"></script>
		<!--<script type="text/javascript" src="../lib/js/external/jquery-1.6.2.min.js"></script>-->
		
		<!-- jQuery Plugin scripts -->
		<script type="text/javascript" src="../lib/js/external/jquery.easing.1.3.min.js"></script>
		<script type="text/javascript" src="../lib/js/external/jquery.mousewheel.min.js"></script>
		
		<!-- Slider Kit scripts -->
		<script type="text/javascript" src="../lib/js/sliderkit/jquery.sliderkit.1.9.2.pack.js"></script>

		<!-- Slider Kit launch -->
		<script type="text/javascript">
			$(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility				
				
				// Photo slider > Minimal
				$(".photoslider-mini").sliderkit({
					auto:false,
					autospeed:3000,
					panelbtnshover:true,
					circular:true,
					fastchange:false
				});
				
				// Photo slider > Bullets nav
				$(".photoslider-bullets").sliderkit({
					auto:false,
					circular:true,
					mousewheel:true,
					shownavitems:5,
					panelfx:"sliding",
					panelfxspeed:1000,
					panelfxeasing:"easeOutExpo" // "easeOutExpo", "easeInOutExpo", etc.
				});
				
				// Photo slider > 1 click
				$(".photoslider-1click").sliderkit({
					auto:false,
					circular:true,
					shownavitems:8,
					panelclick:true,
					panelfx:"sliding",
					panelfxspeed:1000,
					panelfxeasing:"easeInOutExpo"
				});
				
				// Photo slider > Vertical
				$("#photoslider-vertical").sliderkit({
					auto:false,
					circular:true,
					shownavitems:1,
					navfx:"none",
					panelfx:"sliding",
					panelfxspeed:1200,
					panelfxeasing:"easeOutCirc",
					mousewheel:true,
					verticalnav:true,
					verticalslide:true
				});
			});	
		</script>
		
		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos.css" media="screen, projection" />
		
		<!-- Slider Kit compatibility -->
		<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie6.css" /><![endif]-->
		<!--[if IE 7]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie7.css" /><![endif]-->
		<!--[if IE 8]><link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-demos-ie8.css" /><![endif]-->

		<!-- Site styles -->
		<link rel="stylesheet" type="text/css" href="../lib/css/sliderkit-site.css" media="screen, projection" />
		
	</head>
	<body>
		<div id="header">
			<div id="header-wrapper">
				<div id="header-title"><a href="../sliderkit_en.html" title="SliderKit Homepage">Slider Kit, sliding contents with jQuery.</a></div>
				<div class="spacer"></div>
			</div>
		</div>
		<div id="page" class="inner layout-1col">
			<div id="content">
				<h1 class="code-first">Photos sliders</h1>
				
				<noscript><div class="noscript"><span class="code-sitename">Slider Kit</span> jQuery plugin requires Javascript activation.</div></noscript>
				
				<h2>Minimal photo slider</h2>
				<p>A simple photos slider without navigation bar. I added prev/next buttons over the photos, setting the parameter <span class="code-setting">panelbtnshover</span> to <span class="code-value">true</span>.
				<br/>Links on photos are optional.</p>
				<p><strong>Features: </strong>auto, circular.</p>
				
				<!-- Start photoslider-mini -->
				<div class="sliderkit photoslider-mini">
					<div class="sliderkit-panels">
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-prev"><a href="#" title="Previous"><span>Previous</span></a></div>
						<div class="sliderkit-btn sliderkit-go-btn sliderkit-go-next"><a href="#" title="Next"><span>Next</span></a></div>

						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-04.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-05.jpg" alt="[Alternative text]" /></a>
						</div>
					</div>
				</div>
				<!-- // end of photoslider-mini -->
				
				<h2>Bullets nav photo slider</h2>	
				<p>A simple photos slider with bullets navbar (top right of the slider).</p>
				<p><strong>Features: </strong>circular, sliding effect + easing, mousewheel control.</p>

				<!-- Start photoslider-bullets -->
				<div class="sliderkit photoslider-bullets">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li><a href="#" title="Photo sample 01"></a></li>
								<li><a href="#" title="Photo sample 02"></a></li>
								<li><a href="#" title="Photo sample 03"></a></li>
								<li><a href="#" title="Photo sample 04"></a></li>
								<li><a href="#" title="Photo sample 05"></a></li>
							</ul>
						</div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-04.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-05.jpg" alt="[Alternative text]" />
						</div>
					</div>
				</div>
				<!-- // end of photoslider-bullets -->
				
				<div class="code-notes">
					<h4>Notes</h4>
					<p>In this example, the parameter <em class="code-setting">shownavitems</em> must be equal to the number of photos.</p>
					<p>The parameter <em class="code-setting">panelfxeasing</em> is recommended when <em class="code-setting">panelfx</em> value is "sliding".</p>
				</div>
				
				<h2>1 click photo slider</h2>	
				<p>Click on the panels area to slide the photos.</p>
				<p><strong>Features: </strong>circular, sliding effect + easing, 1 click slide.</p>

				<!-- Start photoslider-1click -->
				<div class="sliderkit photoslider-1click">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li><a href="#" title="Photo sample 01">1</a></li>
								<li><a href="#" title="Photo sample 02">2</a></li>
								<li><a href="#" title="Photo sample 03">3</a></li>
								<li><a href="#" title="Photo sample 04">4</a></li>
								<li><a href="#" title="Photo sample 05">5</a></li>
								<li><a href="#" title="Photo sample 06">6</a></li>
								<li><a href="#" title="Photo sample 07">7</a></li>
								<li><a href="#" title="Photo sample 08">8</a></li>
							</ul>
						</div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-01.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-02.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-03.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-04.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-05.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-06.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-07.jpg" alt="[Alternative text]" />
						</div>
						<div class="sliderkit-panel">
							<img src="../lib/images/photos/sample-08.jpg" alt="[Alternative text]" />
						</div>
					</div>
				</div>
				<!-- // end of photoslider-1click -->

				<div class="code-notes">
					<h4>Notes</h4>
					<p>In this example, the parameter <em class="code-setting">shownavitems</em> must be equal to the number of photos.</p>
					<p>The parameter <em class="code-setting">panelfxeasing</em> is recommended when <em class="code-setting">panelfx</em> value is "sliding".</p>
				</div>


				<h2>Vertical photo slider</h2>
				<p>Vertical slider + a single item carousel: the <span class="code-setting">shownavitems</span> option is set to <span class="code-value">1</span>.</p>
				<p><strong>Features: </strong>vertical slide, mousewheel, circular.</p>

				<!-- Start image-slider-vertical -->
				<div id="photoslider-vertical" class="sliderkit">
					<div class="sliderkit-nav">
						<div class="sliderkit-nav-clip">
							<ul>
								<li>Photo n°1</li>
								<li>Photo n°2</li>
								<li>Photo n°3</li>
							</ul>
						</div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Previous"><span>Previous</span></a></div>
						<div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Next"><span>Next</span></a></div>
					</div>
					<div class="sliderkit-panels">
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-01-v.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-02-v.jpg" alt="[Alternative text]" /></a>
						</div>
						<div class="sliderkit-panel">
							<a href="#" title="[Link title text]"><img src="../lib/images/photos/sample-03-v.jpg" alt="[Alternative text]" /></a>
						</div>
					</div>
				</div>
				<!-- // end of image-slider-vertical -->
				
			</div>
			<div class="spacer"></div>
		</div>
	</body>
</html>
